<template>
  <div class="content">
    <div class="right">
      <ul>
        <h2>热门歌手</h2>
        <li class="right_item" v-for="(item,index) in sglist" :key="item.id">
          <div class="lists">
            <p @click="$router.push({ path: '/detailsofTheSinger',query: {
              id:item.id,
              fansCount: item.fansCount
            }})">
              <img :src="item.picUrl" alt="" />
              <span>{{item.name
              }}</span>
              <i class="icon" v-show="item.musicSize>130"></i>
            </p>
          </div>
          <div v-if="!item.followed" class="rightNumList" @click="followed(item,index,item.id)">
            <i>+</i>
            <span>关注</span>
          </div>
          <div v-else class="rightygz" @click="cancelFollowed(item,index,item.id)">
            <span>已关注</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getTopList, collectionToCancelTheSinger } from "@/api/singer";
export default {
  data() {
    return {
      sglist:[],
      type:-1,
      area:-1,
      i:-1,
    }
  },
  methods: {
    //获取歌手列表
    getTopListFun(){
      getTopList(this.type, this.area).then(data=>{ 
        this.sglist = data.artists
        console.log(data);
      })

    },
  //  收藏歌手
    followed(item,index,id){
     
      collectionToCancelTheSinger(id,1).then(data=>{
        this.$set(item, index, item.followed=true)
      
      })
    },
  //取消收藏
    cancelFollowed(item,index,id){
    collectionToCancelTheSinger(id, 0)
    this.$set(item, index, item.followed = false)
  }
  },

  created(){ 
    this.getTopListFun()
  
  },
watch:{
  $route:{
    handler(){
      this.type=this.$route.query.type,
        this.area=this.$route.query.area
      this.getTopListFun()
    }
  }
}
};
</script>

<style lang="scss" scoped>


.content {
  width: 100%;
  h2 {
    height: 25px;
    line-height: 25px;
    color: #fff;
    background-color: #dadbdc;
    text-indent: 10px;
    font-size: 14px;
    width: 100%;
  }
  .right {
    width: 100%;
    ul {
      width: 100%;
      li {
        width: 100%;
        margin: 10px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .lists {
          flex: 1;
          p {
            display: flex;
            align-items: center;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
            span {
              font-size: 16px;
              margin: 0 8px;
            }
            .icon {
              background: url("@/assets/img/icon.png") no-repeat 0 -740px;
              width: 16px;
              height: 17px;
              
            }
          }
        }
        .rightNumList{ 
          border: 1px solid #FF4A4A;
          border-radius: 20px;
          flex: 0 0 50px;
          margin-right: 20px;
          text-align: center;
          color: #FF4A4A;
          // padding: 2px 0px;
          line-height: 15px;
        
          i{
            margin-right: 3px;
          }
          span{ 
            font-size: 12px;
        
            padding-right: 3px;
          }
        }
      .rightygz{
        border: 1px solid #959595;
          border-radius: 20px;
          flex: 0 0 50px;
          margin-right: 20px;
          text-align: center;
          color: #959595;
          // padding: 2px 0px;
          line-height: 15px;
          span {
              font-size: 12px;
              padding-right: 3px;
            }
      }
      }
    }
  }
}
</style>